<template>
  <a-modal
    :title="title"
    :width="width"
    :visible="visible"
    :confirmLoading="confirmLoading"
    switchFullscreen
    @ok="handleOk"
    @cancel="handleCancel"
    cancelText="关闭">
      <template slot="footer">
        <a-button key="back" @click="handleCancel">
          关闭
        </a-button>
        <a-button key="submit" type="primary"  @click="handleOk">
          保存草稿
        </a-button>
        <a-button key="send" type="primary" @click="sendReceived">
          发送
        </a-button>
      </template>
    <a-spin :spinning="confirmLoading">
      <a-form :form="form" class="ant-form ant-form-horizontal">
        <a-card  id="staffCard" class="ant-card ant-card-bordered" style="margin: 0px auto; width: 1000px;">
         <span id="staffLeaveTitle">公文收文</span>
        <table  border="1px" id="staffEvectionTable">
          <tr>
            <td  style="text-align: center"><span>来文单位：</span></td>
            <td class="title">
              <a-form-item>
                <a-input v-decorator="['sourceUnit',validatorRules.sourceUnit]" placeholder="请输入来文单位" class="inputHeight"></a-input>
              </a-form-item>
            </td>
            <td style="text-align: center"><span>收文日期：</span></td>
            <td>
              <a-form-item>
                <a-date-picker placeholder="请选择收文日期" v-decorator="['receiptDate']" :trigger-change="true"/>
              </a-form-item>
            </td>
          </tr>
          <tr>
            <td  style="text-align: center">
              <span>文件标题：</span>
            </td>
            <td colspan="3" class="title">
              <a-form-item>
                <a-input v-decorator="['title',validatorRules.title]" placeholder="请输入文件标题" class="inputHeight"></a-input>
              </a-form-item>
            </td>
          </tr>
          <tr>
            <td  style="text-align: center">
              <span>缓急：</span>
            <td>
              <a-form-item>
                <j-dict-select-tag
                  type="list"
                  v-decorator="['urgency']"
                  :trigger-change="true"
                  dictCode="urgency"
                  placeholder="请选择缓急"
                  style="width: 52%"/>
              </a-form-item>
            </td>
            <td  style="text-align: center">
              <span>密级：</span>
            </td>
            <td>
              <a-form-item >
                <j-dict-select-tag
                  type="list" v-decorator="['secretLevel']"
                  :trigger-change="true"
                  dictCode="secret_level"
                  placeholder="请选择密级"
                  style="width: 52%"/>
              </a-form-item>
            </td>
          </tr>
          <tr>
            <td>
              <span>收文编号：</span>
            </td>
            <td class="title">
              <a-form-item>
                <a-input v-decorator="['receiptCode',validatorRules.receiptCode]" placeholder="请输入收文编号" class="inputHeight"></a-input>
              </a-form-item>
            </td>
            <td>
              <span>来文字号：</span>
            </td>
            <td class="title">
              <a-form-item>
                <a-input v-decorator="['issuedCode',validatorRules.issuedCode]" placeholder="请输入来文字号" class="inputHeight"></a-input>
              </a-form-item>
            </td>
          </tr>
          <tr>
            <td>
              <span>公文内容：</span>
            </td>
            <td colspan="3">
              <a-form-item>
                <j-upload :bizPath="DrafTextPath" v-model="officialContents" placeholder="请输入公文内容"></j-upload>
              </a-form-item>
            </td>
          </tr>
          <tr >
            <td>
              <span>发文附件：</span>
            </td>
            <td colspan="3">
              <a-form-item>
                <j-upload :bizPath="filePath" v-model="fileUrl" placeholder="请输入发文附件"></j-upload>
              </a-form-item>
            </td>
          </tr>

          <tr>
            <td>
              <span>拟办意见：</span>
            </td>
            <td style="text-align: center" colspan="3">
              <a-form-item>
                <a-textarea v-decorator="['draftOpinion']" placeholder="请输入拟办意见" class="textType"></a-textarea>
              </a-form-item>
            </td>
          </tr>

          <tr>
            <td>
              <span>办公室领导意见：</span>
            </td>
            <td colspan="3">
              <a-form-item>
                <a-textarea v-decorator="['officeComments']" placeholder="请输入办公室领导意见" class="textType" read-only></a-textarea>
              </a-form-item>
            </td>
          </tr>
          <tr>
            <td>
              <span>主办部门意见：</span>
            </td>
            <td colspan="3">
              <a-form-item>
                <a-textarea v-decorator="['sponsorComments']" placeholder="请输入主办部门意见" class="textType" read-only></a-textarea>
              </a-form-item>
            </td>
          </tr>
          <tr>
            <td>
              <span>协办部门意见：</span>
            </td>
            <td colspan="3">
              <a-form-item>
                <a-textarea v-decorator="['coSponsorComments']" placeholder="请输入协办部门意见" class="textType" read-only></a-textarea>
              </a-form-item>
            </td>
          </tr>
          <tr>
            <td style="text-align: center">
              <span>领导审核意见：</span>
            </td>
            <td colspan="3">
              <a-form-item>
                <a-textarea v-decorator="['leaderInstructions']" placeholder="请输入领导审核意见" class="textType" read-only></a-textarea>
              </a-form-item>
            </td>
          </tr>
          <tr>
            <td>
              <span>传阅部门：</span>
            </td>
            <td colspan="3"  class="title">
              <a-form-item :xs="24" :sm="21">
                <div style="display: flex">
                  <a-select
                    placeholder="请选择部门"
                    v-decorator="['departNames',validatorRules.departNames]"
                    mode="multiple"
                    :disabled="disabled"
                    style="margin-top: 3px;"
                  />
                  <a-button @click="selectDepart" style="margin-left: 10px;margin-top: 3px;">选择</a-button>
                </div>
              </a-form-item>
            </td>
          </tr>
        </table>
        </a-card>
        <oa-offcialdoc-select-depart-modal
          ref="departModal"
          :multi="true"
          @ok="resultOk">

        </oa-offcialdoc-select-depart-modal>
      </a-form>
    </a-spin>
  </a-modal>
</template>

<script>
  import { httpAction, getAction,postAction } from '@/api/manage'
  import pick from 'lodash.pick'
  import { validateDuplicateValue } from '@/utils/util'
  import JFormContainer from '@/components/jeecg/JFormContainer'
  import JDate from '@/components/jeecg/JDate'
  import JUpload from '@/components/jeecg/JUpload'
  import moment from 'moment'
  import JSelectDepart from '@/components/jeecgbiz/JSelectDepart'
  import oaOffcialdocSelectDepartModal from './OaOffcialdocSelectDepartModal'

  export default {
    name: "OaOfficialdocReceivedModal",
    components: {
      JFormContainer,
      JDate,
      JUpload,
      JSelectDepart,
      oaOffcialdocSelectDepartModal
    },
    data() {
      return {
        form: this.$form.createForm(this),
        title: '操作',
        width: 1200,
        visible: false,
        model: {},
        labelCol: {
          xs: { span: 24 },
          sm: { span: 5 }
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 16 }
        },
        confirmLoading: false,
        loading: false,
        validatorRules: {
          sourceUnit: {
            rules: [
              { required: true, message: '请填写来文单位!' }
            ]
          },
          title: {
            rules: [
              { required: true, message: '请填写标题!' }
            ]
          },
          receiptCode: {
            rules: [
              { required: true, message: '请填写收文编号!' }
            ]
          },
          issuedCode: {
            rules: [
              { required: true, message: '请填写来文字号!' }
            ]
          },
          departNames: {
            rules: [
              { required: true, message: '请选择传阅部门!' }
            ]
          },
        },
        url: {
          add: "/eoa/officialdoc/oaOfficialdocReceived/add",
          edit: "/eoa/officialdoc/oaOfficialdocReceived/edit",
          queryById: "/eoa/officialdoc/oaOfficialdocReceived/queryById",
          startProcess: "/act/process/extActProcess/startMutilProcess",
          getReceiptCode:"/eoa/officialdoc/oaOfficialdocReceived/getReceiptCode",
          queryPageList: "/eoa/officialdoc/oaOfficialdocDepartUser/list",
          getDepartName:"/eoa/officialdoc/oaOfficialdocDepartUser/getDepartName"
        },
        filePath: 'enclosure',
        DrafTextPath: 'draftText',
        fileUrl: [],
        officialContents: [],
        customReturnField: "id",
        flowCode: 'dev_oa_officialdoc_received_001',
        disabled:true,
        departIds:"",
        newDeparts:[]
      }
    },
    methods: {
      created() {
      },
      add() {
        this.edit({})
      },
      edit(record) {
        this.form.resetFields();
        this.model = Object.assign({}, record);
        this.visible = true;
        this.departIds=this.model.circulationDepts
        getAction(this.url.getReceiptCode).then((res)=>{
          if(res.success){
            if(this.model.id){
              this.form.setFieldsValue({"receiptCode":this.model.receiptCode})
            }else{
              this.form.setFieldsValue({"receiptCode":res.result})
            }
          }
        })
        getAction(this.url.queryPageList).then((res)=>{
          if(res.success){
            var userDepart=res.result.records
            let departIds="";
            if(userDepart){
              for (let i = 0; i <userDepart.length ; i++) {
                let departId = userDepart[i].departId
                departIds+=departId+",";
              }
              if(departIds){
                this.newDeparts=departIds;
              }
            }

          }
        })
        if(this.departIds){
          getAction(this.url.getDepartName,{"departId":this.departIds}).then((res) =>{
            if(res.success){
              var departNames=res.result.split(",")
              this.form.setFieldsValue({'departNames':departNames})
            }
          })
        }
        this.$nextTick(() => {
          this.form.setFieldsValue(pick(this.model, 'sourceUnit', 'title', 'secretLevel', 'urgency', 'issuedCode', 'draftOpinion', 'officeComments', 'sponsorComments', 'coSponsorComments', 'leaderInstructions'))
          this.form.setFieldsValue({ receiptDate: this.model.receiptDate ? moment(this.model.receiptDate, "YYYY-MM-DD") : moment(new Date(), "YYYY-MM-DD") })
        })

        this.officialContents = this.model.officialContents;
        this.fileUrl = this.model.fileUrl
      },
      handleOk() {
        const that = this;
        if (!this.officialContents) {
          this.$message.warning("请上传公文内容！")
        } else {
          // 触发表单验证
          this.form.validateFields((err, values) => {
            if (!err) {
              that.confirmLoading = true;
              let httpurl = '';
              let method = '';
              if (!this.model.id) {
                httpurl += this.url.add;
                method = 'post';
              } else {
                httpurl += this.url.edit;
                method = 'put';
              }
              let formData = Object.assign(this.model, values);
              formData.stauts = '0';
              formData.fileUrl = this.fileUrl
              formData.officialContents = this.officialContents
              formData.circulationDepts=this.departIds;
              console.log("表单提交数据", formData)
              httpAction(httpurl, formData, method).then((res) => {
                if (res.success) {
                  that.$message.success(res.message);
                  that.close();
                } else {
                  that.$message.warning(res.message);
                }
              }).finally(() => {
                that.confirmLoading = false;
              })
            }

          })
        }
      },
      sendReceived() {
        const that = this;
        if (!this.officialContents) {
          this.$message.warning("请上传公文内容！")
        } else {
          // 触发表单验证
          this.form.validateFields((err, values) => {
            if (!err) {
              that.confirmLoading = true;
              let httpurl = '';
              let method = '';
              if (!this.model.id) {
                httpurl += this.url.add;
                method = 'post';
              } else {
                httpurl += this.url.edit;
                method = 'put';
              }
              let formData = Object.assign(this.model, values);
              formData.stauts = '1';
              formData.bpmStatus = '1';
              formData.fileUrl = this.fileUrl
              formData.officialContents = this.officialContents
              formData.circulationDepts=this.departIds;
              console.log("表单提交数据", formData)
              httpAction(httpurl, formData, method).then((res) => {
                if (res.success) {
                  if (formData.id) {
                    that.startProcess(formData);
                  } else {
                    formData.id = res.result;
                    that.startProcess(formData);
                  }
                } else {
                  that.$message.warning(res.message);
                }
              }).finally(() => {
                that.confirmLoading = false;
              })
            }

          })
        }
      },
      startProcess(record) {
        let params = {
          flowCode: this.flowCode,
          id: record.id,
          formUrl: 'modules/eoa/officialdoc/modules/OaOfficialdocReceivedForm',
          formUrlMobile: 'modules/eoa/officialdoc/modules/OaOfficialdocReceivedForm'
        }
        postAction(this.url.startProcess, params).then(res => {
          if (res.success) {
            this.$message.success(res.message);
             this.close();
          } else {
            this.$message.warning(res.message);
          }
        }).catch((e) => {
          this.$message.warning('不识别的请求!');
        })
      },
      handleCancel(){
        this.close();
      },
      close() {
        this.$emit('ok')
        this.departIds=""
        this.departNames=[]
        this.newDeparts=[]
        this.visible = false
      },
      selectDepart(){
        this.$refs.departModal.visible=true;
        var param=[];
        param.departIds=this.departIds;
        param.newDeparts=this.newDeparts;
        this.$refs.departModal.loadDepart(param,"");
      },
      resultOk(data,departIds){
        this.form.setFieldsValue({'departNames':[]})
        if(data){
          var departNames = data.map(data => data['departName']).join(',')
          departNames = departNames.split(",")
          this.form.setFieldsValue({'departNames':departNames})
        }
        this.departIds=departIds;
      },
    }
  }
</script>

<style>
  .inputHeight {
    width: 100%;
    border: none;
    border-radius: 0;
    background:#fff;
  }

  .textType {
    resize: none;
    height: 118px !important;
    font-size: 12px;
    border: 0 solid white;
    border-radius: 0;
    margin-bottom: 0;
  }
  .textareaType{
    width: 100%;
    height: 100%;
    position: relative;
    top: 22px;
    right: 6px;
    resize:none;
  }
  .title .ant-form-explain {
    margin-top:10px !important;
  }
  #staffCard {
    border: 1px solid #fff;
    box-shadow: 0 0 1px 1px #aaa, 3px 0 5px 0 #aaa, 0 4px 7px 0 #aaa;
    border-radius: 5px;
  }
  #staffLeaveTitle {
    margin-top: 1px;
    font-weight: 700;
    text-align: center;
    display: block;
    color: #000;
    font-size: 24px;
  }
  #staffEvectionTable {
    width: 100%;
    font-size: 12px;
    text-align: center;
    background-color: #fff;
    margin-top: 10px;
  }
  #staffEvectionTable .input .ant-input, #staffEvectionTable .text {
    border: 0 solid #000!important;
    border-radius: 0;
    background-color: #fff;
    margin: 0 auto;
    width: 100%;
    font-size: 12px;
    height: 38px;
  }
  #staffEvectionTable .ant-form-item {
    margin: 0;
  }
</style>